<template>
  <view class="flex flex-row items-center" :style="{ 'background-color': backgroundColor }">
    <div class="w-1 h-4 rounded bg-primary"></div>
    <div class="text-primary ml-2 flex-1">{{ title }}</div>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    },
		full: {
			type: Boolean,
			default: false
		}
  }
}
</script>

<style lang="scss">
.caring-title {
  .caring-title-icon {
    background-color: $u-primary;
    display: inline-block;
    width: 8rpx;
    height: 32rpx;
    margin-top: 4rpx;
    border-radius: 5rpx;
  }
  .caring-title-text {
    font-size: 30rpx;
    color: $u-primary;
    margin-left: 15rpx;
    line-height: 40rpx;
    flex: 1;
  }
  .caring-title-sub {
    flex: 1;
  }
}
</style>
